<template>
	<view class="container">
		<view class="cards userinfo">
			{{userName || '未命名'}}
		</view>
		<u-cell-group>
			<u-cell-item icon="file-text" title="使用手册" @click="goBook"></u-cell-item>
			<u-cell-item icon="phone" title="联系客服" value="010-83682266" :arrow="false" @click="doPhone"></u-cell-item>
		</u-cell-group>
		<u-button class="logout-btn" @click="isLogout" shape="circle" :ripple="true"
			:custom-style="logoutBtn">退出登录</u-button>
		<tabBar :current="2"></tabBar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import tabBar from "@/components/tabBar.vue";
	export default {
		components: {
			tabBar: tabBar
		},
		data() {
			return {
				logoutBtn: {
					width: "92%",
					height: '82rpx',
					lineHeight: '82rpx',
					background: '#0081ff',
					fontSize: '28rpx',
					margin: '0 4%',
					color: '#FFFFFF',
					borderColor: 'none',
					marginTop: '200rpx'
				},
				userName:"",//用户名
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		created() {
			this.userName = uni.getStorageSync('userName');
		},
		methods: {
			// 联系客服
			doPhone() {
				uni.makePhoneCall({
					phoneNumber: '010-83682266'
				});
			},
			// 退出登录
			isLogout() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success(res) {
						if (res.confirm) {
							that.doLogout();
						}
					}
				})
			},
			doLogout() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			goBook() {
				uni.navigateTo({
					url: '/pages/my/book/index'
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1 !important;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.cards {
		@include cards;
	}

	.userinfo {
		padding: 40rpx 30rpx;
	}
</style>